<template>
  <a-tooltip v-if="vipLevel === 0" title="开通VIP以激活特权" placement="top">
    <div class="vip-avatar-container" :class="getContainerClass()">
      <!-- 头像边框 -->
      <div class="avatar-border" :class="getBorderClass()">
        <!-- 头像 -->
        <a-avatar 
          :size="size" 
          :src="avatar" 
          :class="['vip-avatar', getAvatarClass()]"
        >
          {{ fallbackText }}
        </a-avatar>
        
        <!-- VIP光环效果 -->
        <div v-if="vipLevel > 0" class="vip-glow" :class="getGlowClass()"></div>
      </div>
      
      <!-- VIP徽章 -->
      <div v-if="vipLevel > 0" class="vip-badge" :class="getBadgePositionClass()">
        <div class="badge-content" :class="getBadgeClass()">
          <span class="badge-text">{{ getBadgeText() }}</span>
          <div class="badge-shine"></div>
        </div>
      </div>
      
      <!-- VIP吊坠 -->
      <div v-if="vipLevel > 0 && showPendant" class="vip-pendant" :class="getPendantClass()">
        <div class="pendant-chain"></div>
        <div class="pendant-charm" :class="getCharmClass()">
          <CrownOutlined v-if="vipLevel === 1" class="charm-icon" />
          <StarOutlined v-else class="charm-icon" />
        </div>
      </div>
    </div>
  </a-tooltip>
  
  <div v-else class="vip-avatar-container" :class="getContainerClass()">
    <!-- 头像边框 -->
    <div class="avatar-border" :class="getBorderClass()">
      <!-- 头像 -->
      <a-avatar 
        :size="size" 
        :src="avatar" 
        :class="['vip-avatar', getAvatarClass()]"
      >
        {{ fallbackText }}
      </a-avatar>
      
      <!-- VIP光环效果 -->
      <div v-if="vipLevel > 0" class="vip-glow" :class="getGlowClass()"></div>
    </div>
    
    <!-- VIP徽章 -->
    <div v-if="vipLevel > 0" class="vip-badge" :class="getBadgePositionClass()">
      <div class="badge-content" :class="getBadgeClass()">
        <span class="badge-text">{{ getBadgeText() }}</span>
        <div class="badge-shine"></div>
      </div>
    </div>
    
    <!-- VIP吊坠 -->
    <div v-if="vipLevel > 0 && showPendant" class="vip-pendant" :class="getPendantClass()">
      <div class="pendant-chain"></div>
      <div class="pendant-charm" :class="getCharmClass()">
        <CrownOutlined v-if="vipLevel === 1" class="charm-icon" />
        <StarOutlined v-else class="charm-icon" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { CrownOutlined, StarOutlined } from '@ant-design/icons-vue'

// Props
interface Props {
  avatar?: string
  vipLevel?: number // 0: 普通用户, 1: VIP, 2: SVIP
  size?: number | 'small' | 'default' | 'large'
  userName?: string
  showPendant?: boolean
  showGlow?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  avatar: '',
  vipLevel: 0,
  size: 'default',
  userName: '',
  showPendant: true,
  showGlow: true
})

// 计算属性
const fallbackText = computed(() => {
  return props.userName ? props.userName.charAt(0).toUpperCase() : 'U'
})

const getContainerClass = () => {
  const classes = ['vip-avatar-wrapper']
  
  if (props.vipLevel === 1) classes.push('vip-container')
  if (props.vipLevel === 2) classes.push('svip-container')
  
  return classes
}

const getBorderClass = () => {
  const classes = ['avatar-border-wrapper']
  
  if (props.vipLevel === 0) classes.push('normal-border')
  if (props.vipLevel === 1) classes.push('vip-border')
  if (props.vipLevel === 2) classes.push('svip-border')
  
  return classes
}

const getAvatarClass = () => {
  const classes = []
  
  if (props.vipLevel === 1) classes.push('vip-avatar-style')
  if (props.vipLevel === 2) classes.push('svip-avatar-style')
  
  return classes
}

const getGlowClass = () => {
  const classes = ['glow-effect']
  
  if (props.vipLevel === 1) classes.push('vip-glow-effect')
  if (props.vipLevel === 2) classes.push('svip-glow-effect')
  
  return classes
}

const getBadgePositionClass = () => {
  const sizeValue = typeof props.size === 'number' ? props.size : 
    props.size === 'small' ? 24 : 
    props.size === 'large' ? 80 : 40
  
  return sizeValue > 50 ? 'badge-large' : 'badge-small'
}

const getBadgeClass = () => {
  const classes = ['badge-main']
  
  if (props.vipLevel === 1) classes.push('vip-badge-style')
  if (props.vipLevel === 2) classes.push('svip-badge-style')
  
  return classes
}

const getPendantClass = () => {
  const classes = ['pendant-wrapper']
  
  if (props.vipLevel === 1) classes.push('vip-pendant-style')
  if (props.vipLevel === 2) classes.push('svip-pendant-style')
  
  return classes
}

const getCharmClass = () => {
  const classes = ['charm-main']
  
  if (props.vipLevel === 1) classes.push('vip-charm')
  if (props.vipLevel === 2) classes.push('svip-charm')
  
  return classes
}

const getBadgeText = () => {
  if (props.vipLevel === 1) return 'VIP'
  if (props.vipLevel === 2) return 'SVIP'
  return ''
}
</script>

<style scoped>
.vip-avatar-container {
  position: relative;
  display: inline-block;
}

.avatar-border {
  position: relative;
  border-radius: 50%;
  padding: 2px;
  background: transparent;
  transition: all 0.3s ease;
}

/* 普通用户边框样式 */
.normal-border {
  background: #9ca3af;
  transition: all 0.3s ease;
}

.normal-border:hover {
  background: linear-gradient(45deg, #6b7280, #9ca3af, #6b7280);
  background-size: 200% 200%;
  animation: normal-border-hint 2s ease-in-out infinite;
}

@keyframes normal-border-hint {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* VIP边框样式 */
.vip-border {
  background: linear-gradient(45deg, #ffd700, #ffed4e, #ffd700);
  background-size: 200% 200%;
  animation: vip-border-glow 3s ease-in-out infinite;
}

.svip-border {
  background: linear-gradient(45deg, #8b5cf6, #ec4899, #f59e0b, #8b5cf6);
  background-size: 300% 300%;
  animation: svip-border-glow 4s ease-in-out infinite;
}

@keyframes vip-border-glow {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@keyframes svip-border-glow {
  0%, 100% { background-position: 0% 50%; }
  25% { background-position: 100% 0%; }
  50% { background-position: 100% 100%; }
  75% { background-position: 0% 100%; }
}

/* 头像样式 */
.vip-avatar {
  position: relative;
  z-index: 2;
  border: 2px solid rgba(255, 255, 255, 0.8);
}

.vip-avatar-style {
  box-shadow: 0 0 15px rgba(255, 215, 0, 0.4);
}

.svip-avatar-style {
  box-shadow: 0 0 20px rgba(139, 92, 246, 0.5);
}

/* 光环效果 */
.vip-glow {
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
}

.vip-glow-effect {
  background: radial-gradient(circle, rgba(255, 215, 0, 0.3) 0%, transparent 70%);
  animation: vip-pulse 2s ease-in-out infinite;
}

.svip-glow-effect {
  background: radial-gradient(circle, rgba(139, 92, 246, 0.4) 0%, transparent 70%);
  animation: svip-pulse 2.5s ease-in-out infinite;
}

@keyframes vip-pulse {
  0%, 100% { 
    transform: scale(1); 
    opacity: 0.6; 
  }
  50% { 
    transform: scale(1.1); 
    opacity: 0.9; 
  }
}

@keyframes svip-pulse {
  0%, 100% { 
    transform: scale(1) rotate(0deg); 
    opacity: 0.7; 
  }
  50% { 
    transform: scale(1.15) rotate(180deg); 
    opacity: 1; 
  }
}

/* VIP徽章 */
.vip-badge {
  position: absolute;
  z-index: 3;
}

.badge-large {
  top: -8px;
  right: -8px;
}

.badge-small {
  top: -5px;
  right: -5px;
}

.badge-content {
  position: relative;
  padding: 3px 8px;
  border-radius: 12px;
  font-size: 10px;
  font-weight: 700;
  color: white;
  overflow: hidden;
  min-width: 24px;
  text-align: center;
}

.vip-badge-style {
  background: linear-gradient(45deg, #ffd700, #ffed4e);
  color: #000;
  border: 1px solid #ffd700;
  box-shadow: 0 2px 8px rgba(255, 215, 0, 0.4);
}

.svip-badge-style {
  background: linear-gradient(45deg, #8b5cf6, #ec4899);
  color: white;
  border: 1px solid #8b5cf6;
  box-shadow: 0 2px 8px rgba(139, 92, 246, 0.4);
}

.badge-text {
  position: relative;
  z-index: 2;
  font-weight: 800;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.badge-shine {
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  animation: badge-shine 3s ease-in-out infinite;
}

@keyframes badge-shine {
  0%, 100% { left: -100%; }
  50% { left: 100%; }
}

/* VIP吊坠 */
.vip-pendant {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  animation: pendant-float 6s ease-in-out infinite;
}

.pendant-chain {
  width: 2px;
  height: 18px;
  background: linear-gradient(to bottom, 
    rgba(255, 215, 0, 0.9) 0%, 
    rgba(255, 215, 0, 0.7) 50%, 
    rgba(255, 215, 0, 0.4) 100%);
  margin: 0 auto;
  border-radius: 1px;
  animation: chain-sway 5s ease-in-out infinite;
  box-shadow: 0 0 4px rgba(255, 215, 0, 0.3);
  position: relative;
}

.pendant-chain::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 100%;
  background: linear-gradient(to bottom, 
    rgba(255, 255, 255, 0.8) 0%, 
    rgba(255, 255, 255, 0.3) 50%, 
    transparent 100%);
  animation: chain-shimmer 3s ease-in-out infinite;
}

.svip-pendant-style .pendant-chain {
  background: linear-gradient(to bottom, 
    rgba(139, 92, 246, 0.9) 0%, 
    rgba(236, 72, 153, 0.7) 50%, 
    rgba(245, 158, 11, 0.4) 100%);
  box-shadow: 0 0 4px rgba(139, 92, 246, 0.3);
}

.pendant-charm {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
  box-shadow: 
    0 4px 8px rgba(0, 0, 0, 0.3),
    0 0 12px rgba(255, 215, 0, 0.4);
  animation: charm-swing 5s ease-in-out infinite;
  position: relative;
  overflow: hidden;
}

.pendant-charm::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg, 
    transparent 30%, 
    rgba(255, 255, 255, 0.4) 50%, 
    transparent 70%);
  animation: charm-shine 4s ease-in-out infinite;
  pointer-events: none;
}

.vip-charm {
  background: linear-gradient(135deg, 
    #ffd700 0%, 
    #ffed4e 25%, 
    #ffc107 50%, 
    #ffed4e 75%, 
    #ffd700 100%);
  background-size: 200% 200%;
  animation: charm-swing 5s ease-in-out infinite, 
             vip-charm-glow 3s ease-in-out infinite;
  color: #000;
  border: 1px solid rgba(255, 215, 0, 0.6);
}

.svip-charm {
  background: linear-gradient(135deg, 
    #8b5cf6 0%, 
    #ec4899 25%, 
    #f59e0b 50%, 
    #ec4899 75%, 
    #8b5cf6 100%);
  background-size: 200% 200%;
  animation: charm-swing 5s ease-in-out infinite, 
             svip-charm-glow 3s ease-in-out infinite;
  color: white;
  border: 1px solid rgba(139, 92, 246, 0.6);
  box-shadow: 
    0 4px 8px rgba(0, 0, 0, 0.3),
    0 0 12px rgba(139, 92, 246, 0.4);
}

.charm-icon {
  font-size: 12px;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
  z-index: 2;
  position: relative;
  animation: icon-pulse 2s ease-in-out infinite;
}

/* 动画定义 */
@keyframes pendant-float {
  0%, 100% { 
    transform: translateX(-50%) translateY(0px); 
  }
  50% { 
    transform: translateX(-50%) translateY(-2px); 
  }
}

@keyframes chain-sway {
  0%, 100% { 
    transform: translateX(-50%) rotate(0deg); 
  }
  25% { 
    transform: translateX(-50%) rotate(3deg); 
  }
  75% { 
    transform: translateX(-50%) rotate(-3deg); 
  }
}

@keyframes chain-shimmer {
  0%, 100% { 
    opacity: 0.3; 
  }
  50% { 
    opacity: 0.8; 
  }
}

@keyframes charm-swing {
  0%, 100% { 
    transform: rotate(0deg) scale(1); 
  }
  25% { 
    transform: rotate(6deg) scale(1.05); 
  }
  75% { 
    transform: rotate(-6deg) scale(1.05); 
  }
}

@keyframes charm-shine {
  0% { 
    transform: translateX(-150%) translateY(-150%) rotate(45deg); 
  }
  50% { 
    transform: translateX(-50%) translateY(-50%) rotate(45deg); 
  }
  100% { 
    transform: translateX(50%) translateY(50%) rotate(45deg); 
  }
}

@keyframes vip-charm-glow {
  0%, 100% { 
    background-position: 0% 50%; 
    box-shadow: 
      0 4px 8px rgba(0, 0, 0, 0.3),
      0 0 12px rgba(255, 215, 0, 0.4);
  }
  50% { 
    background-position: 100% 50%; 
    box-shadow: 
      0 4px 8px rgba(0, 0, 0, 0.3),
      0 0 16px rgba(255, 215, 0, 0.6);
  }
}

@keyframes svip-charm-glow {
  0%, 100% { 
    background-position: 0% 50%; 
    box-shadow: 
      0 4px 8px rgba(0, 0, 0, 0.3),
      0 0 12px rgba(139, 92, 246, 0.4);
  }
  50% { 
    background-position: 100% 50%; 
    box-shadow: 
      0 4px 8px rgba(0, 0, 0, 0.3),
      0 0 16px rgba(139, 92, 246, 0.6);
  }
}

@keyframes icon-pulse {
  0%, 100% { 
    transform: scale(1); 
  }
  50% { 
    transform: scale(1.1); 
  }
}

/* 悬停效果 */
.vip-avatar-container:hover .vip-border {
  animation-duration: 1s;
}

.vip-avatar-container:hover .vip-glow {
  animation-duration: 1s;
}

.vip-avatar-container:hover .vip-pendant {
  animation: pendant-float 2s ease-in-out infinite, 
             pendant-hover-bounce 0.6s ease-out;
}

.vip-avatar-container:hover .pendant-charm {
  animation-duration: 2s;
  transform: rotate(0deg) scale(1.1);
}

.vip-avatar-container:hover .charm-icon {
  animation: icon-pulse 1s ease-in-out infinite;
}

.vip-avatar-container:hover .pendant-chain {
  animation: chain-sway 2s ease-in-out infinite,
             chain-hover-glow 0.8s ease-out;
}

/* 悬停时的额外动画 */
@keyframes pendant-hover-bounce {
  0% { transform: translateX(-50%) translateY(0px); }
  30% { transform: translateX(-50%) translateY(-4px); }
  60% { transform: translateX(-50%) translateY(-1px); }
  100% { transform: translateX(-50%) translateY(0px); }
}

@keyframes chain-hover-glow {
  0% { 
    box-shadow: 0 0 4px rgba(255, 215, 0, 0.3); 
  }
  50% { 
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.6); 
  }
  100% { 
    box-shadow: 0 0 4px rgba(255, 215, 0, 0.3); 
  }
}

/* 深色模式适配 */
.dark .vip-avatar {
  border-color: rgba(255, 255, 255, 0.6);
}

.dark .pendant-chain {
  filter: brightness(0.8);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .vip-pendant {
    display: none;
  }
  
  .badge-small {
    top: -3px;
    right: -3px;
  }
  
  .badge-content {
    padding: 2px 6px;
    font-size: 8px;
    min-width: 20px;
  }
}

/* 尺寸变体 */
.vip-avatar-container.size-small .pendant-chain {
  height: 10px;
}

.vip-avatar-container.size-small .pendant-charm {
  width: 15px;
  height: 15px;
}

.vip-avatar-container.size-small .charm-icon {
  font-size: 8px;
}

.vip-avatar-container.size-large .pendant-chain {
  height: 25px;
}

.vip-avatar-container.size-large .pendant-charm {
  width: 30px;
  height: 30px;
}

.vip-avatar-container.size-large .charm-icon {
  font-size: 14px;
}
</style>
